<template>
    <div class="login">
        <div class="box">
            <div class="header">课程管理系统</div>
            <div class="body">
                <el-form ref="form" :model="form" :rules="rules">
                    <el-form-item prop="username">
                        <el-input prefix-icon="el-icon-user-solid" v-model="form.username"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input prefix-icon="el-icon-lock" type="password" v-model="form.password"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-radio-group v-model="form.userType">
                            <el-radio :label="2">教师</el-radio>
                            <el-radio :label="3">管理员</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit" style="width: 100%;">登录</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>
import { login } from '@/api/user'
export default {
    data() {
        return {
            form: {
                username: '',
                password: '',
                userType: 3
            },
            rules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                ],

            }
        };
    },
    methods: {
        onSubmit() {
            this.$refs['form'].validate(flag => {
                console.log(flag);
                if (flag) {
                    console.log(this.form);
                    login(this.form).then(res => {
                        console.log(res);
                        if (res.code === 0) {
                            this.$message({
                                message: '成功',
                                type: 'success',
                                duration: 1500
                            });
                            //先处理数据，再放vuex中
                            let group = []
                            for (let bit = 0; bit < 8; bit++) {
                                // 0100 0000
                                // 0010 0000
                                if (((1 << bit) & res.data.permission) === 1 << bit) {
                                    group.push((1 << bit).toString());
                                }
                            }
                            console.log(group);
                            res.data.group=group

                            //更新vuex中数据
                            this.$store.commit("user/updateInfo", res.data)
                            //后跳转
                            this.$router.push("/index");
                        }
                    })
                }
            })

        }
    }
};
</script>
<style scoped lang="scss">
.login {
    height: 100%;
    background-image: url(../assets/1.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .box {
        width: 350px;
        height: 350px;
        background-color: rgba(0, 0, 0, .5);
        border-radius: 10px;

        .header {
            height: 50px;
            line-height: 50px;
            text-align: center;
            color: white;
            font-size: 20px;
            border-bottom: 1px solid #ccc;
        }

        .body {
            padding: 30px 30px;
        }
    }

    ::v-deep .el-radio__label {
        color: white;
    }
}
</style>